<template>
    <div>
        <div class="particles-js">
            <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
            </vue-particles>
        </div>

        <div class="container">
            <el-form class="loginForm" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-position="left" label-width="0px">
                <h3 class="login_title">{{title}}</h3>
                <el-form-item prop="mg_name">
                    <el-input type="text" prefix-icon="el-icon-user" v-model="loginForm.mg_name" auto-complete="off" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="mg_pwd">
                    <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.mg_pwd" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="submitLogin"><i :class="loging?'el-icon-loading':''"></i> {{loging?'登录中':'登录'}}</el-button>
                </el-form-item>
            </el-form>
            <footer class="d-flex j-sa white-color fs-14">
                <p>Copyright(C)2021-2030</p>
                <p>陇ICP备XXXXXXXX</p>
                <p>公安备12009878-18</p>
            </footer>
        </div>
    </div>

</template>
 
 
<script>
    import { loginCheck } from '../api/user'
    import { mapMutations } from 'vuex'
    export default {
        name: 'Login',
        components: {},
        data() {
            return {
                loging: false,
                title: '博客管理系统平台',
                rules: {
                    mg_name: [
                        {
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur',
                        },
                        { min: 3, message: '长度至少为3个字符', trigger: 'blur' },
                    ],
                    mg_pwd: [
                        {
                            required: true,
                            message: '请正确输入密码',
                            trigger: 'change',
                        },
                        {
                            min: 3,
                            max: 6,
                            message: '密码长度在 3 到 6 个字符',
                            trigger: 'blur',
                        },
                    ],
                },
                loginForm: {
                    mg_name: 'admin',
                    mg_pwd: '123456',
                },
                responseResult: [],
            }
        },
        methods: {
            ...mapMutations('loginModule', ['setUser']),
            submitLogin() {
                this.$refs.loginForm.validate(async valid => {
                    if (valid) {
                        this.loging = true
                        // this.$http.post('login', this.loginForm): 返回值为promise
                        // 返回值为promise，可加await简化操作 相应的也要加async
                        // const { data: res } = await this.$http.post(
                        //     "/login",
                        //     this.loginForm
                        // );
                        const res = await loginCheck(this.loginForm)
                        this.loging = false
                        console.log(res)
                        // console.log(res.results[0])
                        if (res.status !== 200)
                            return this.$message.error(res.message)
                        // return this.$notify.error({
                        //     message: res.message,
                        // });
                        this.$message({
                            duration: 1000,
                            message: res.message,
                            type: 'success',
                        })
                        // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
                        //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
                        //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                        //利用localstorage存储到本地
                        let obj = {
                            mg_name: res.results[0].mg_name,
                            token: res.token,
                            avatar: res.results[0].avatar,
                        }
                        this.setUser(obj)
                        //存储本地
                        // window.localStorage.setItem("user", JSON.stringify(obj));

                        // window.localStorage.setItem("token", res.token);
                        // window.localStorage.setItem("mg_name", res.mg_name);

                        // 将登录名使用vuex传递到Home页面
                        // this.$store.commit("handleUserName", res.data.username);
                        // window.sessionStorage.setItem("token", res.token);
                        // window.sessionStorage.setItem("mg_name", res.mg_name);
                        // 2、通过编程式导航跳转到后台主页, 路由地址为：/home
                        this.$router.replace('/home')
                    } else {
                        console.log('校验错误')
                        return false
                    }
                })
            },
        },
    }
</script>
 
<style scoped>
    .container {
        top: calc(50% - 25%);
        left: calc(50% - 211px);
        position: fixed;
    }
    .loginForm {
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    footer {
        position: fixed;
        width: 100%;
        min-width: 1280px;
        bottom: 0px;
    }
    .particles-js {
        background-image: url('../assets/images/login-bg.jpg');
        /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #particles-js {
        width: 100%;
        height: 100%;
        position: absolute;
    }
</style>

